<template>
  <j-modal
    :title="title"
    :width="1000"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div class="table-page-search-wrapper">
      <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
        <z-form-item
          :datas="fieldArr"
          :form="queryParam"
          :submitAction="{ show: true, toggle: false, span: 6 }"
          @onSubmit="onQuery"
          @onReset="onResetForm"
        />
      </a-form-model>
      <z-table
        ref="table"
        rowKey="id"
        selectionType="radio"
        :showAlert="false"
        :showSelection="true"
        :loading="loading"
        :columns="columns"
        :dataSource="pageData"
        @selectedRow="onSelectedRow"
        @change="onTableChange"
      />
    </div>
  </j-modal>
</template>

<script>
import * as personServiceApi from '@/api/sjsk/personService'
export default {
  data() {
    return {
      title: '吸毒人员列表',
      visible: false,
      loading: false,
      model: {},
      queryParam: {},
      fieldArr: [
        { label: '姓名', prop: 'name', tagType: 'input', span: 6 },
        { label: '身份证号', prop: 'identityCard', tagType: 'input', span: 6 },
        { label: '人员类型', prop: 'personType', tagType: 'dict-select', dictCode: 'risk_level_person_type', span: 6 },
      ],
      columns: [
        {
          title: '姓名',
          dataIndex: 'realName',
          width: 60,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={14} />
          },
        },
        {
          title: '性别',
          dataIndex: 'sex',
          width: 40,
          align: 'center',
          customRender: (text, record, index) => {
            return this.$filterDictTextByCache('sex', text)
          },
        },
        {
          title: '身份证号',
          dataIndex: 'identityCard',
          width: 110,
          align: 'left',
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          width: 80,
          align: 'center',
        },
        {
          title: '人员类型',
          dataIndex: 'personType',
          width: 100,
          align: 'center',
          customRender: (text, record, index) => {
            return <j-ellipsis value={this.$filterDictTextByCache('risk_level_person_type', text)} length={14} />
          },
        },
        {
          title: '户籍地详址',
          dataIndex: 'householdAddress',
          width: 120,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
          },
        },
        {
          title: '现居住地详址',
          dataIndex: 'currentAddress',
          width: 120,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
          },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
    }
  },
  methods: {
    show(record) {
      this.visible = true
      this.onQuery()
    },
    onQuery() {
      console.log(this.queryParam)
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.queryParam = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onSelectedRow(keys) {
      let record = keys && keys.length > 0 ? keys[0] : {}
      this.model = Object.assign(
        {},
        Object.keys(record).length>0 ?
        {
          personId: record.id,
          personName: record.realName,
          personSex: record.sex,
          identityNumber: record.identityCard,
          phoneNumber: record.phone,
          personType: record.personType,
          birthAddress: record.householdAddress,
          permanentAddress: record.currentAddress
        }
        : {}
      )
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      let queryParam = Object.assign({}, this.queryParam, this.pageFilter)
      this.loading = true
      personServiceApi
        .getRescuePersonList(queryParam)
        .then((res) => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    handleOk() {
      if (Object.keys(this.model).length === 0 && !this.model.personId) {
        this.$message.warn('请选择其中一条！')
        return
      }
      console.log(this.model)
      this.$emit('ok', this.model)
      setTimeout(()=>{
        this.handleCancel()
      }, 500)
    },
    handleCancel() {
      this.visible = false
      this.model = {}
    },
  },
}
</script>

<style scoped lang="less"></style>
